<template>
  <div class="page-container-padding page-view">
    <div class="actions-bar">
      <div>
        <el-button
          icon="el-icon-tickets"
          type="primary"
          size="mini"
          @click="toMyList"
        >
          我的报告
        </el-button>
      </div>
      <div class="right">
        <el-button
          icon="el-icon-refresh"
          type="danger"
          size="mini"
          @click="toRestore"
        >
          回收站
        </el-button>
      </div>
    </div>
    <div class="last-box">
      <el-table
        border
        stripe
        :data="lastReports.rows"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="file_date" label="报告日期" width="110" />
        <el-table-column label="名称" show-overflow-tooltip min-width="400">
          <template #default="{ row }">
            <div class="file-title" @click="toShowFile(row)">
              <vab-icon :icon="['fas', 'file-pdf']"></vab-icon>
              {{ row.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="variety_name" label="品种" width="150" />
        <el-table-column prop="examine_text" label="组长审核" width="100" />
        <el-table-column
          prop="dept_examine_text"
          label="部门审核"
          width="100"
        />
        <el-table-column prop="create_time" label="创建时间" width="160" />
        <el-table-column label="操作" width="50" align="center">
          <template #default="{ row }">
            <el-button
              v-if="row.is_delete === 1"
              type="primary"
              icon="el-icon-refresh"
              circle
              @click="toActionReportRow(row, 0)"
            />
            <el-button
              v-else
              type="danger"
              icon="el-icon-delete"
              circle
              @click="toActionReportRow(row, 1)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        hide-on-single-page
        layout="prev, pager, next, jumper"
        style="margin-top: 10px"
        :current-page.sync="lastReports.page"
        :page-size="lastReports.pageSize"
        :total="lastReports.totalCount"
        @current-change="getLastReports"
      />
    </div>
  </div>
</template>
<script>
  import {
    GetBelongReport,
    DelBelongReport,
  } from '@/api/departmentWork/periodReport'
  export default {
    data() {
      return {
        fileType: 'Weekly',
        lastReports: {
          page: 1,
          pageSize: 25,
          totalCount: 0,
          isDelete: 0,
          rows: [],
        },
      }
    },
    mounted() {
      this.getLastReports()
    },
    methods: {
      getLastReports() {
        GetBelongReport(
          this.fileType,
          this.lastReports.page,
          this.lastReports.pageSize,
          this.lastReports.isDelete
        ).then((res) => {
          this.lastReports.rows = res.data.data
          this.lastReports.page = res.data.page
          this.lastReports.totalCount = res.data.total_count
        })
      },
      toShowFile(row) {
        window.open(row.file_url)
      },
      toRestore() {
        this.lastReports.isDelete = 1
        this.getLastReports()
      },
      toMyList() {
        this.lastReports.isDelete = 0
        this.getLastReports()
      },
      toActionReportRow(row, action) {
        const msgtip =
          action === 1 ? '确定删除这篇报告吗?' : '确定回收这篇报告吗?'
        this.$baseConfirm(msgtip, '提示', () => {
          DelBelongReport(row.id, action).then((res) => {
            this.getLastReports()
          })
        })
      },
      tableRowClassName({ row }) {
        if (row.examine_state === -1 || row.dept_examine_state === -1) {
          return 'examine-reject'
        } else if (row.examine_state === 0 || row.dept_examine_state === 0) {
          return 'examine-stay'
        } else {
          return 'examine-pass'
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  .page-view {
    .actions-bar {
      display: flex;
      align-items: center;
      .right {
        margin-left: auto;
      }
    }
    .last-box {
      margin: 10px 0;
      .file-title {
        cursor: pointer;
      }
      .el-table ::v-deep .examine-reject {
        color: #cf3437;
      }
      .el-table ::v-deep .examine-stay {
        color: #444;
      }
      .el-table ::v-deep .examine-pass {
        color: #0e5195;
      }
    }
  }
</style>
